import React, { useState } from 'react'
import { Search, Tabs } from 'react-vant';
import { LikeO, Gem } from '@react-vant/icons';
import '../App.css'
import { useNavigate } from 'react-router-dom';
import { Outlet } from 'react-router-dom';

export default function Home() {

  const [value, setValue] = useState('');

  const routerList = [
    { title: '推荐', patch: '/home' },
    { title: '手机', patch: '/home/shouji' },
    { title: '智能', patch: '/home/zhineng' },
    { title: '电视', patch: '/home/dianshi' },
    { title: '家电', patch: '/home/jiadian' },
    { title: '笔记本', patch: '/home/bijiben' },
  ]

  let navigate = useNavigate()

  return (
    <div>

      {/* 搜索 */}
      <div className='input'>
        <span><Gem /></span>
        <span> <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" /></span>
        <span><LikeO /></span>
      </div>

      {/* 标签页 */}
      <Tabs color='orange' onChange={(e) => {
        //console.log(e);
        navigate(e)
      }}>
        {routerList.map((item, index) => (
          <Tabs.TabPane key={index} title={item.title} name={item.patch}>

          </Tabs.TabPane>
        ))}
      </Tabs>

      <div>
        <Outlet/>
      </div>

    </div>
  )
}
